<div class="" id="app">
  <div class="flex items-center p2">
    <div style="flex: 1">
      <a href="javascript:history.go(-1)" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    </div>
    <button v-if="selectedItem._id" @click="deleteItem" class="weui-btn weui-btn_mini weui-btn_warn">删除</button>
  </div>
  <div class="weui-cells__title">奖品设置</div>
  <div class="weui-cells">
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">奖品图片</label>
      </div>
      <div class="weui-cell__bd">
        <div class="relative">
          <img v-if="selectedItem.photo" v-bind:src="selectedItem.photo" style="width: 100px; height: 50px" />
          <img v-else src="/img/plus.png" style="width: 100px; height: 50px" />
          <input
            type="file"
            style="width: 100px; height: 50px; z-index: 2; opacity: 0"
            class="absolute top-0 left-0"
            @change="uploadFile"
            id="selected-upload-photo"
            name=""
          />
        </div>
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">奖品名称</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" v-model="selectedItem.name" placeholder="请输入奖品名称" />
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">奖品份数</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" v-model="selectedItem.stock" />
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">所需积分</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="number" v-model="selectedItem.point" />
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">开奖时间</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" placeholder="开奖时间" type="datetime-local" v-model="selectedItem.opentime" />
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">活动说明</label>
      </div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="selectedItem.desc" placeholder="请简单描述一下奖品"></textarea>
      </div>
    </div>

    <div class="weui-cell">
      <div class="weui-cell__hd">
        <label class="weui-label">获奖通知</label>
      </div>
      <div class="weui-cell__bd">
        <textarea class="weui-textarea" v-model="selectedItem.tips" placeholder="获奖通知"></textarea>
      </div>
    </div>
  </div>

  <div class="center my2">
    <button @click="submitItem" class="weui-btn weui-btn_primary">保存</button>
  </div>
</div>
<script>
  new Vue({
    el: "#app",
    data: function () {
      return {
        clientid: "<%=client._id%>",
        drawid: "<%=drawid%>",
        client: {},
        selectedItem: {
          stock: 3,
          point: 10,
          name: "夏日遮阳伞",
          desc: "马上参与抽奖，抽奖后自动群里发送中奖播报。",
          photo: "/upload/60efdae8aca53918b939822e-1641973083577.png",
          opentime: dayjs().format("YYYY-MM-DDTHH:MM"),
          tips: "恭喜{{中奖者}}获得{{奖品名}}，请联系管理员领取",
        },
      };
    },
    created: function () {
      this.getClient();
      // this.refresh();
      let draw = <%-JSON.stringify(draw)%>
      if(draw){
        this.selectedItem = draw;
      }
    },
    methods: {
      getClient: function () {
        var that = this;
        axios.get("/client/info").then(function (res) {
          that.client = res.data.client;
        });
      },
      // refresh: function () {
      //   let that = this;
      //   if (this.itemid || this.selectedItem._id) {
      //     let itemid = this.itemid || this.selectedItem._id;
      //     axios
      //       .get("/client/point/item/" + itemid)
      //       .then(function (res) {
      //         console.log(res.data);
      //         that.selectedItem = res.data.item;
      //       });
      //   }
      // },

      uploadFile: function () {
        let that = this;
        var imgfile = document.getElementById("selected-upload-photo").files[0];
        var options = {
          maxSizeMB: 0.8,
          maxWidthOrHeight: 1000,
        };
        imageCompression(imgfile, options).then(function (compressed) {
          var formData = new FormData();
          formData.append("file", compressed);
          axios.post("/client/upload", formData).then(function (res) {
            weui.toast("上传成功", { duration: 500 });
            setTimeout(function () {
              that.selectedItem.photo = res.data.path;
            }, 600);
          });
        });
      },

      submitItem: function () {
        let that = this;
        axios.post("/client/point/draw", this.selectedItem).then(function (res) {
          if (!res.data.status) {
            return weui.topTips(res.data.msg);
          }
          weui.toast("保存成功", { duration: 500 });
          location.href = "/client/home";
        });
      },
      deleteItem: function () {
        if (confirm("确认删除？")) {
          let that = this;
          axios.post("/client/point/draw/delete", this.selectedItem).then(function (res) {
            weui.toast("删除成功", { duration: 500 });
            location.href = "/client/home";
          });
        }
      },
    },
  });
</script>

<script type="text/javascript" src="/js/browser-image-compression.js"></script>
